<template>
  <view>
    <view class="income-head">
      <u-button :text="item.name" shape="circle" :color="btncount === item.type?'#2F7EFC':''"
        v-for="item,index in classifyList" :key="index" @click="classifyChange(item)"></u-button>
    </view>
    <view class="income-list">
      <view class="income-nav" @click="toDetail()">
        <view class="income-title">2024年1月18日</view>
        <view class="income-price">
          <view class="price-num">
            <view class="price-left">
              <view>¥190</view>
            </view>
            <view class="price-right">
              <view>净收入160元</view>
              <u-icon name="arrow-right" color="#909090"></u-icon>
            </view>
          </view>
          <view class="price-title">交易3笔 其中退款1笔</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        btncount: 1,
        classifyList: [{
          name: '日统计',
          type: 1
        }, {
          name: '月统计',
          type: 2
        }],
      }
    },
    methods: {
      classifyChange(item) {
        this.btncount = item.type
      },
      toDetail(){
        uni.navigateTo({
          url:'/pages/specialColumnPage/expertPage/statistic-detail'
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .income-head {
    width: 100%;
    height: 114rpx;
    box-sizing: border-box;
    padding: 0 36rpx;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.39);

    /deep/ .u-button--normal {
      margin: 0 15rpx;
    }

    /deep/ .u-button--info {
      color: #909090;
      background-color: #F9F9F9;
    }

    /deep/ .u-button--normal {
      font-size: 32rpx;

    }
  }

  .income-list {
    box-sizing: border-box;
    padding: 15rpx 30rpx;

    .income-nav {
      height: 256rpx;
      width: 100%;
      display: flex;
      flex-direction: column;

      .income-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #909090;
      }

      .income-price {
        margin-top: 20rpx;
        width: 690rpx;
        height: 162rpx;
        background: rgba(255, 255, 255);
        box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
        border-radius: 10rpx;
        box-sizing: border-box;
        padding: 22rpx 30rpx;

        .price-num {
          display: flex;
          font-size: 28rpx;
          font-weight: 500;
          color: #909090;
          align-items: flex-end;

          .price-left {
            font-size: 56rpx;
            font-weight: 500;
            color: #EABF79;
          }

          .price-right {
            flex: 1;
            display: flex;
            margin-left: 20rpx;
            justify-content: space-between;
            :first-child {
              flex: 1;

            }
          }
        }

        .price-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #909090;
          margin-top: 10rpx;
        }
      }
    }
  }
</style>